<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>商城列表</title>
  <link rel="stylesheet" type="text/css" href="../res/static/css/main.css" />
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css" />
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
</head>
<body>
  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="/">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div class="login"><a href="/login">登录</a></div>
        <div class="sp-cart"><a href="/Cart/queryCart">购物车</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="宠物商城">
            <img src="../res/static/img/logo.png" />
          </a>
        </h1>
        <div class="mallSearch">
          <form action="/shop/queryGood" method="post" class="layui-form" name="frm">
            <input type="text" name="name"  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品" />
              <input type="hidden" name="page" id="page" value="" />
            <button class="layui-btn"  lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base commodity-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="/shop/queryAllGoods" class="active">所有商品</a>
            <a href="/inforMation">宠物资讯</a>
            <a href="/about">关于我们</a>
          </div>
        </div>
      </div>
    </div>
      <div class="commod-cont-wrap">
          <div class="commod-cont w1200 layui-clear">
              <div class="left-nav">
                  <div class="title">所有分类</div>
                  <div class="list-box" th:each="items : ${Title}">
                      <dl>
                          <dt th:text="${items.supTypeDesc}">

                          </dt>
                          <a th:each="i:${items.secondTitles}"  th:href="@{/shop/queryGood(subType = ${i.id})}">

                          <dd th:text="${i.name}">

                          </dd>
                          </a>
                      </dl>
                  </div>
        </div>
        <div class="right-cont-wrap">
          <div class="right-cont">
            <div class="sort layui-clear">
              <!--<a class="active" href="javascript:;" event = 'volume'>销量</a>-->
              <!--<a href="javascript:;" event = 'price'>价格</a>-->
              <!--<a href="javascript:;" event = 'newprod'>新品</a>-->
              <!--<a href="javascript:;" event = 'collection'>收藏</a>-->
            </div>
            <div class="prod-number">
              <span></span>
            </div>
            <div class="cont-list layui-clear" id="list-cont">

                <div th:each="items : ${Goods}">

                <div class="item">
                <div class="img">
                  <a th:href="@{/goodsInfo(id=${items.id})}"><img th:src="@{'http://image.husky007.top/'+${items.image}}" width="280px" height="300px"/></a>
                </div>
                <div class="text">
                  <p class="title" th:text="${items.name}"></p>
                  <p class="price">
                      <span class="pri" th:text="${'￥'+items.price}"></span>
                  </p>
                </div>
              </div>
                </div>
            </div>
              <div class="page">
                  <div>
                      <ul class="pagination">
                          <li ><a href="javascript:go(1)">首页</a></li>
                          <li><a th:href="|javascript:go(${Pages.prePage})|">上一页</a></li>
                          <li><a th:href="|javascript:go(${Pages.nextPage})|">下一页  </a></li>
                          <li><a th:href="|javascript:go(${Pages.pages})|">末页</a></li>

                      </ul>
                      <div style="margin-top:10px">
                          <span th:text="${'共'+Pages.pages+'页,'+'第'+Pages.pageNum+'页'}"></span>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script>

  layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','laypage','jquery'],function(){
      var laypage = layui.laypage,$ = layui.$,
     mm = layui.mm;
       laypage.render({
        elem: 'demo0'
        ,count: 100 //数据总数
      });


    $('.sort a').on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
    $('.list-box dt').on('click',function(){
      if($(this).attr('off')){
        $(this).removeClass('active').siblings('dd').show()
        $(this).attr('off','')
      }else{
        $(this).addClass('active').siblings('dd').hide()
        $(this).attr('off',true)
      }
    })

});
</script>


  <script>
      function go(currPage){
          $('#page').val(currPage);
          document.frm.submit();
      }
  </script>

</body>
</html>
